// 权限拦截在路由跳转 路由守卫
import router from '@/router'
// 不需要导出 main.js已经引入 这段代码只需要执行

import store from '@/store'// store实例和this.$store一回事

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const whiteList = ['/login', '/404']// 定义白名单  所有不受权限控制的页面
// 前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start()// 开启进度条
  // to 到哪里去 from 从哪里来 next前置守卫必须执行的钩子不执行页面就死了
  // next() 直接通行
  // next(false) 终止跳转
  // next(路由地址) 跳转
  if (store.getters.token) {
    if (to.path === '/login') {
      // 如果访问的是登录页
      next('/')// 跳到主页
    } else {
      if (!store.getters.userId) {
        // 如果没有id这个值 才会调用 vuex的获取资料的action
        const { roles } = await store.dispatch('user/getUserInfo')
        // 为什么要写await 因为我们想获取完资料再去放行

        // 如果说后续 需要根据用户资料获取数据的话 这里必须改成 同步
        // 筛选用户的可用路由
        // actions中函数 默认是Promise对象 调用这个对象 想要获取返回的值话 必须 加 await或者是then
        // actions是做异步操作的
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // routes就是筛选得到的动态路由
        // 动态路由 添加到 路由表中 默认的路由表 只有静态路由 没有动态路由
        // addRoutes  必须 用 next(地址) 不能用next()
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表  铺路  哈希值重置了 不能用原来的哈希值跳了
        // 添加完动态路由之后
        next(to.path) // 相当于跳到对应的地址  相当于多做一次跳转
      } else {
        next()
      }
    }
  } else {
    // 没有token
    // 判断要去的地址在不在白名单
    // 在直接放行
    // 不在跳到登录页
    whiteList.indexOf(to.path) > -1 ? next() : next('/login')
  }
  NProgress.done() // 解决手动切换进度条进度条不关闭的问题
})
// 后置守卫
router.afterEach(function() {
  NProgress.done() // 关闭进度条
})
